<script setup>
import MessArea_1 from '/src/components/MessArea_1.vue';
import MessArea_2 from './MessArea_2.vue';
import MessArea_3 from './MessArea_3.vue';
import { defineProps } from 'vue';   

// 接收父组件传递的 messageComponent 和 changeMessageComponent
const props = defineProps({
  messageComponent: Object,
  changeMessageComponent: Function
});
    // 赞点击
    const likeMessClick = () =>{
      props.changeMessageComponent(MessArea_2);
       console.log('likeMessClicked')
    };
    // 评论点击
     const replyMessClick = () =>{
       props.changeMessageComponent(MessArea_1);  // 设置为 MessArea_2
    };
    // // 领养点击
     const adoptMessClick = () =>{
      props.changeMessageComponent(MessArea_3);  // 设置为 MessArea_2

    };
  

</script>

<template>
  <el-menu
      default-active="1"
      style="display: flex;justify-content: center;height:40px;"
      active-text-color="#FFD466"
      mode="horizontal"
  >
    <el-menu-item class="chose" index="1" style="margin-right:10px" @click="likeMessClick">赞</el-menu-item>
    <el-menu-item class="chose" index="2" style="margin-right:10px" @click="replyMessClick">评论</el-menu-item>
    <el-menu-item class="chose" index="3" @click="adoptMessClick">领养申请</el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu{
  border:0!important;
}

.chose{
  font-size:13px;
  font-weight:bold;
}
::v-deep .chose:hover{
  background-color: #FFE9B2!important;
  color:#FFD466!important;
}
.el-menu-item.is-active{
  background-color: white!important;
  color:#FFD466!important;
}
</style>
